<template>
	<view>
		<u-navbar leftText="" title="商城" :safeAreaInsetTop="true">
			<view class="u-nav-slot u-p-r-20" slot="left">
				logo
			</view>
			<view class="" slot="left" style="width: 400rpx;">
				<u-search shape="round" height="60" :disabled="true" placeholder="AJ" :show-action="false"
					@click="searchPage"></u-search>
			</view>
		</u-navbar>
		<u-swiper :list="list3" indicator indicatorMode="line" circular height="300" imgMode="heightFix"></u-swiper>
		<view>
			<view class="u-p-20">
				<u-notice-bar :text="notice" direction="column"></u-notice-bar>
			</view>
			<view class="tuijian" @click="gotoPro()">
				<view class="u-flex u-flex-between u-p-20">
					<u--text text="钜惠" color="#ff0000" size="20"></u--text>		
					<u--text text="更多>>" align="right"></u--text>		
				</view>
				<u-scroll-list indicatorActiveColor="#ff0000">
					<view v-for="(item, index) in juhui" :key="index" class="tjimg">
						<u--image :showLoading="true" :src="glob.baseUrl+item.imgUrl" width="200rpx" height="200rpx"></u--image>
						<u--text :text="item.name" align="center"></u--text>			
					</view>
				</u-scroll-list>
			</view>
			<u-line color="#ccc"></u-line>
			<view class="tuijian" @click="gotoPro()">
				<view class="u-flex u-flex-between u-p-20">
					<u--text text="折扣" color="#ffaa00" size="20"></u--text>		
					<u--text text="更多>>" align="right"></u--text>		
				</view>
				<u-scroll-list indicatorActiveColor="#ffaa00">
					<view v-for="(item, index) in zhekou" :key="index" class="tjimg">
						<u--image :showLoading="true" :src="glob.baseUrl+item.imgUrl" width="200rpx" height="200rpx"></u--image>
						<u--text :text="item.name" align="center"></u--text>	
					</view>
				</u-scroll-list>
			</view>
			<u-line color="#ccc"></u-line>
			<view class="tuijian" @click="gotoPro()">
				<view class="u-flex u-flex-between u-p-20">
					<u--text text="秒杀" color="#ff5500" size="20"></u--text>		
					<u--text text="更多>>" align="right"></u--text>		
				</view>
				<u-scroll-list indicatorActiveColor="#ff5500">
					<view v-for="(item, index) in miaosha" :key="index" class="tjimg">
						<u--image :showLoading="true" :src="glob.baseUrl+item.imgUrl" width="200rpx" height="200rpx"></u--image>
						<u--text :text="item.name" align="center"></u--text>	
					</view>
				</u-scroll-list>
			</view>
		</view>

		<u-toast ref="uToast" />
	</view>

</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				notice: [],
				list3: [],
				juhui:[],
				zhekou:[],
				miaosha:[],
			}
		},
		onLoad() {
			this.getBrandData()
			this.getNotice()
			this.getProduct()
		},
		onPullDownRefresh() {
		        this.getBrandData()
		        this.getNotice()
		        this.getProduct()
		        setTimeout(function () {
		            uni.stopPullDownRefresh();
		        }, 1000);
		    },
		methods: {
			searchPage() {
				console.log(123);
			},
			gotoPro(){
				uni.$u.route('/pages/shop/shop')
			},
			getBrandData() {
				uni.$u.http.post('/queryShuffling').then(res => {
					this.list3 = res.data.data.map(n => this.glob.baseUrl + n.imgUrl)
				}).catch(err => {
					this.$refs.uToast.error(res.data.resultInfo)
				})
			},
			getNotice(){
				uni.$u.http.post('/queryNotice').then(res => {
					this.notice = res.data.data.map(n => n.detail)
				}).catch(err => {
					this.$refs.uToast.error(res.data.resultInfo)
				})
				
			},
			// { "id":1,//商品id//非必填int "name":"毛巾" //商品名称//非必填string "classification_id":1//商品类别//非必填int "status":1//商品状态//非必填int[1正常，2钜惠，3折扣，4秒杀] }
			getProduct(){
				uni.$u.http.post('/queryProduct', {}).then(res => {
					console.log(res, 999);
					const allData = res.data.data
					this.juhui = allData.filter(e=>e.status == 2)
					this.zhekou = allData.filter(e=>e.status == 3)
					this.miaosha = allData.filter(e=>e.status == 4)
				}).catch(err => {
					this.$refs.uToast.error(res.data.resultInfo)
				})
			},
			click(name) {
				this.$refs.uToast.success(`点击了第${name}个`)
			}
		}
	}
</script>
<style lang="scss">
	.tuijian{
		padding: 20rpx;
		.title{
			font-size: 36rpx;
			font-weight: 700;
			padding: 20rpx;
		}
	}
	.tjimg {
		margin-right: 20rpx;
		height: 220rpx;
		image{
			width: 200rpx;
			height: 200rpx;
			
			// width: 100%;
			// height: 100%;
		}
	}
</style>
